<template>
	<view>
		<view class="lan_text bold textcenter" style="padding-top: 180rpx; font-size: 60rpx;">忘记密码</view>
		<input type="password" style='width:0;height:0;min-height:0' />
		<input type="text" autocomplete="off" style='width:0;height:0;min-height:0' />
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="pdl">
					<input type="text" autocomplete="off" class="hei_text main_size bold" placeholder="请输入邮箱"
						v-model="email">
				</view>
				<view class="pdl margin_top6 flexbetween">
					<input type="text" autocomplete="off" class="hei_text main_size bold" placeholder="请输入验证码" v-model="yzm_code">
					<view class="xiaolan textcenter"  style="width: 150rpx;" @click="sendyzm" v-show="codetext == 1">获取验证码</view>
					<view class="xiaolan textcenter"  style="width: 150rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
					<view class="xiaolan textcenter"  style="width: 150rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
				</view>
				<view class="pdl margin_top6">
					<input type="text" autocomplete="off" class="hei_text main_size bold" placeholder="请输入新密码"
						v-model="newpassword">
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="submitbtn" @click="signIn()"  v-if="!liandiantype">确定</view>
				<view class="submitbtn" v-if="liandiantype">确定</view>
			</view>
		</view>
		<!-- <view class="wave wave1"></view>
		<view class="wave wave2"></view>
		<view class="wave wave3"></view> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext:1,
				second:59,
				email:'',
				yzm_code:'',
				newpassword:"",
				 liandiantype:0
			}
		},
		methods: {
			//发送验证码
			sendyzm(){
				let _this = this;
				if(_this.email == ''){
					httpRequest.toast("请输入邮箱!")
					return;
				}
				_this.codetext = 2;
				_this.second = 59;
				let timer = setInterval(function(){
					if(_this.second > 1){
						_this.second--;
					}else{
						clearInterval(timer);
						_this.codetext = 3;
					}
				},1000)
				httpRequest.request('/api/sms/send','POST',{
					email:this.email,
					event:'resetpwd',
				},false,true,false).then(res => {
					if(res.code == 1){
						httpRequest.toast('发送成功')
					}
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},
			checkaudio(){
				this.type = !this.type
			},
			signIn(){
				if(this.email==""){
					httpRequest.toast("请输入邮箱");
					return false;
				}
				if(this.yzm_code==""){
					httpRequest.toast("请输入验证码");
					return false;
				}
				if(this.newpassword==""){
					httpRequest.toast("请输入密码")
					return false
				}
				this.liandiantype = 1
				uni.showLoading({
					mask:true,
					title:"请稍候"
				})
				httpRequest.request('/api/user/resetpwd','GET',{
					email:this.email,
					captcha:this.yzm_code,
					newpassword:this.newpassword
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}else{
						this.liandiantype = 0
					}
				})
				// uni.navigateTo({
				// 	url:"/pages/login/userinfo"
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wave {
		position: fixed;
		left: 0;
		bottom: 0px;
		width: 200%;
		height: 100px;
		background-repeat: repeat-x;
		background-position: left bottom;
		transform-origin: center bottom;
		background-size: 50% 90px;
	}

	// .wave1 {
	// 	z-index: 5;
	// 	opacity: 1;
	// 	animation: swave 20s linear infinite;
	// 	background-image: url("../../static/image/system/bolang.png");
	// }

	// .wave2 {
	// 	z-index: 4;
	// 	opacity: .3;
	// 	animation: swave 30s linear infinite;
	// 	background-image: url("../../static/image/system/bolang.png");
	// }

	// .wave3 {
	// 	z-index: 3;
	// 	opacity: .5;
	// 	animation: swave 45s linear infinite;
	// 	background-image: url("../../static/image/system/bolang.png");
	// }

	@keyframes swave {
		0% {
			transform: translateX(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) scaleY(.55)
		}

		100% {
			transform: translateX(-50%) scaleY(1)
		}
	}
</style>